<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>easymis</title>
<meta content="easymis" name="description">
<meta content="easymis" name="keywords">
<link rel="stylesheet" href="${base}/public/css/style1/css/global.css">
<link rel="stylesheet"
	href="${base}/public/css/style1/css/common-header.css">
<script type="text/javascript"
	src="${base}/public/css/style1/js/base-all.js"></script>
<script type="text/javascript"
	src="${base}/public/css/style1/js/common-header.js"></script>
<link rel="stylesheet" type="text/css"
	href="${base}/public/css/style1/css/easymis-left-nav.css">
<link rel="stylesheet" type="text/css"
	href="${base}/public/css/style1/font/iconfont.css">
<link media="screen" rel="stylesheet"
	href="${base}/public/css/style1/demo.css" />
<script type="text/javascript"
	src="${base}/public/css/style1/js/easymis-left-nav.js"></script>
<!-- 字体图标-->
<link rel="stylesheet" type="text/css"
	href="${base}/public/plug/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
	<div data-spm="2">
		<div class="ali-common-header">
			<div class="common-header-inner common-header-clearfix">
				<!-- 运营专区 -->
				<div class="activity item pull-left">
					<div class="flash-wrap" id="J-ali-activity-img">
						<img
							src="${base}/public/css/style1/images/TB1nHoRLXXXXXa3XVXXx1caHXXX-460-124.gif"
							style="height: 62px; width: 230px;">
					</div>
					<div class="link logo">
						<a href="http://www.aliyun.com"
							data-spm-click="gostr=/aliyun;locaid=20160107"> </a>
					</div>
					<div class="link activity-url" id="J-activity-url"
						activity-url="http://promotion.aliyun.com/ntms/201601/hello.html?spm=5176.383338.3.1.3U4qp9">
					</div>
				</div>
				<!-- 导航菜单 -->
				<ul class="menu item pull-left" id="J_common_header_menu"
					data-spm="201">
					<li class="top-menu-item"><i id="mini" class="fa fa-list"></i></li>
					<#list menusLevel1 as p>
						<#if (p.level==1 && p_index lt 5)>
							<li class="top-menu-item" has-dropdown="true" menu-type="product" data-spm-click="">
								<!-- <span class="menu-hd"> ${p.displayName!}</span> --> 
								<a class="menu-hd" onClick="loadLevel2Menu('${p.functionId}')"> ${p.displayName!} </a>
							</li>
						<#else>
							<#if p_index == 5>
								<li class="top-menu-item" has-dropdown="true" menu-type="aliplus" data-spm-click="">
									<span class="menu-hd"> <i class="fa fa-ellipsis-v"></i></span>
									<div class="menu-dropdown solutions aliplus-bg">
										<div class="menu-dropdown-inner module-padding aliplus-inner common-header-clearfix">
							</#if>
										<div class="module-wrap " style="width: 250px">
											<div class="module-hd">
												<a onClick="loadLevel2Menu('${p.functionId}')">${p.displayName!}</a>
											</div>
										</div>
							<#if p_index == (menusLevel1?size)>
										</div>
									</div>
								</li>
							</#if>
						</#if>
					</#list>
				</ul>
				<div class="pull-right navbar-right">
					<ul class="common-header-clearfix">
						<li><a class="navbar-avatar dropdown-toggle"
							data-toggle="dropdown" href="#" aria-expanded="false"> <span
								class="avatar avatar-online"> <i>姓名</i>
							</span></a>
							<ul class="dropdown-menu" role="menu">
								<li role="presentation"><a href="javascript:;"
									role="menuitem"> <i class="icon wb-user" aria-hidden="true"></i>
										简介
								</a></li>
								<li role="presentation"><a href="javascript:;"
									role="menuitem"> <i class="icon wb-payment"
										aria-hidden="true"></i> 账单
								</a></li>
								<li role="presentation"><a href="javascript:;"
									role="menuitem"> <i class="icon wb-settings"
										aria-hidden="true"></i> 设置
								</a></li>
								<li class="divider" role="presentation"></li>
								<li role="presentation"><a href="javascript:;"
									role="menuitem"> <i class="icon wb-power"
										aria-hidden="true"></i> 退出
								</a></li>
							</ul></li>
						<li>帮助</li>
						<li>设置</li>
						<li>消息</li>
						<li><a class="fa fa-power-off" id="admui-signOut" data-ctx=""
							data-user="9" href="${base}/logout.action" role="button"> <span
								class="sr-only">退出</span>
						</a></li>
					</ul>
				</div>
			</div>


		</div>
	</div>
	<div class="container-fluid-ful clearfix">
		<div class="easymis-left-nav">
			<ul>
				<#list userInfo.menus as p2> <#if p2.parentId='01'>
				<li class="easymis-left-nav-item">
					<!-- <i class="my-icon easymis-left-nav-icon icon_1fontawesome-icon ${p2.icon!}"></i> -->
					<a href="javascript:;"><i
						class="my-icon easymis-left-nav-icon icon_1"></i><span>${p2.displayName!}</span><i
						class="my-icon easymis-left-nav-more"></i></a>
					<ul>
						<#list userInfo.menus as p3> <#if
							p3.parentId=p2.functionId>
						<li><a
							onClick="loadInit('${base}/${p3.url!}?menuId=${p3.functionId!}','${p3.displayName!}')"><span>${p3.displayName!}</span></a></li>
						</#if> </#list>
					</ul>
				</li>
				</#if> </#list>

			</ul>
		</div>
		<div class="page">
			<div class="page-tag">
				<div class="page-tags">
					<ul class="clearfix">
						<li class="tagsActive" onclick="loadInit()">
							<span>首页</span>
						</li>
					</ul>
				</div>
				<div class="pre" style="display:none;"><i class="fa fa-angle-double-left"></i></div>
				<div class="next" style="display:none;"><i class="fa fa-angle-double-right"></i></div>
			</div>
			<div class="page-content" id="page-content"></div>
		</div>

	</div>


</body>
</html>


<script type=text/javascript>
loadInit();
function loadInit(url,text) {
	addTags(url,text);
	var vUrl;
	if(url == null || 'undefined' == typeof url) 
		vUrl='${base}/oa/index/main.action';
	else
		vUrl=url;
  	$.ajax({
		type : "POST",
		url : vUrl,
		success : function(response) {/* alert(response); */
			$("#page-content").html(response);
		},
		error : function() {

		}
	});
};
/* 添加tags */
function addTags(url,text) {
	if(!text) {
		return false;
	}
	var hasTagsV = hasTags(url);
	if(!hasTagsV) {
		return false;
	}
	$(".page-tags").find("li").removeClass("tagsActive");
	var html = '<li class="tagsActive clearfix"><span data-url="'+url+'" onclick="loadInit(\''+url+'\')">'+text+'</span>'+
	'<i class="fa fa-remove removeTags"></i></li>';
	
	$(".page-tags").find("ul").append(html);
	ulWidth(1);
	
}
/* 获取ul的宽度 */
function ulWidth(num){
	var liLength = $(".page-tags").find("li").length;
	var ulWidth = liLength*130;
	var pageWidth = $(".page-tags").width();
	if(ulWidth > pageWidth) {
		if(num == 1) {
			var ulMargin = $(".page-tags ul").css("margin-left");
			$(".page-tags ul").css({"margin-left":(parseInt(ulMargin)-130)+"px"});
		}else if(num == 0) {
			var ulMargin = $(".page-tags ul").css("margin-left");
			$(".page-tags ul").css({"margin-left":(parseInt(ulMargin)+130)+"px"});
		}
		$(".page-tag").find(".pre").show();
		$(".page-tag").find(".next").show();
		$(".page-tag").css({"padding":"0 30px"});
	}else {
		$(".page-tag").find(".pre").hide();
		$(".page-tag").find(".next").hide();
		$(".page-tags ul").css({"margin-left":0});
		$(".page-tag").css({"padding":"0"})
	}
	
	$(".page-tags").find("ul").css("width",ulWidth+"px");
}

/* 左右按钮事件绑定 */
leftRight();
function leftRight(){
	$(".page-tag .pre").on("click",function(e){
		var LR = $(".page-tags ul").css("margin-left");
		var ulWidth = $(".page-tags").width();
		if(parseInt(LR)>=0) {
			return false;
		}
		$(".page-tags ul").css({"margin-left":(parseInt(LR)+130)+"px"})
	});
	$(".page-tag .next").on("click",function(e){
		var LR = $(".page-tags ul").css("margin-left");
		var ulWidth = $(".page-tags ul").width();
		var ulLR = parseInt(ulWidth)+parseInt(LR);
		if(parseInt(ulLR)<= parseInt($(".page-tags").width())) {
			return false;
		}
		$(".page-tags ul").css({"margin-left":(parseInt(LR)-130)+"px"})
	})
}
/* 遍历当前tags是否存在 */
function hasTags(url){
	var tagsURL = $(".page-tags").find("li").find("span");
	var tagsTF = true;
	tagsURL.map(function(index){
		if($(this).attr("data-url")==url) {
			tagsTF = false;
			$(".page-tags").find("li").removeClass("tagsActive");
			$(this).parent().addClass("tagsActive");
			return false;
		}
	});
	return tagsTF;
}

clickTags();
removeTags();
/* 点击当前改变样式 */
function clickTags(){
	$(document).on("click",".page-tags li",function(e){
		 e.stopPropagation();
		 $(".page-tags").find("li").removeClass("tagsActive");
		 $(this).addClass("tagsActive");
	});

}
/* 移除当前tags */
function removeTags(){
	$(document).on("click",".page-tags li>i",function(e){
		e.stopPropagation();
		removeTagsIsAct($(this).parent());
		$(this).parent().remove();
		ulWidth(0);
	})
}
/* 判断移除项是不是当前项 */
function removeTagsIsAct(obj){
	if(obj.hasClass("tagsActive")){
		var len = $(".page-tags").find("li").length;
		if(obj.index()==(len-1)) {
			var yesTags = $(".page-tags").find("li").eq(len-2);
		}else {
			var yesTags = $(".page-tags").find("li").eq(len-1);
		}
		
		yesTags.addClass("tagsActive");
		if(yesTags.find("span").attr("data-url")) {
			loadInit(yesTags.find("span").attr("data-url"));
		}else {
			loadInit();
		}
		
	}
}

function loadLevel2Menu(menuId){
	$(".top-menu-item").removeClass("top-menu-item-active");
	$(".top-menu-item").eq(menuId).addClass("top-menu-item-active");
	var vHtml="<ul>";
  	$.ajax( {
		type : "POST",
		url : '${base}/ajax/menu.action?menuId='+menuId,
		success : function(data) {
            var response = data.menuLevel2 || "";
            var level3List= data.menuLevel2 || "";
            if (response != "") {    		   
    		    for (var i = 0; i < response.length; i++) {
    		        var level2 = response[i];    		        
    		        if(level2.level==2&&level2.parentId==menuId){
    		        	vHtml+=" <li class='easymis-left-nav-item'>";
    		        	vHtml+=' <a  href="javascript:;"><i class="my-icon easymis-left-nav-icon icon_1"></i><span>'+level2.functionName+'</span><i class="my-icon easymis-left-nav-more"></i></a>';
    		        	var level2MenuId=level2.functionId;
    		        	vHtml+="<ul>";
    		        	for (var j = 0; j < level3List.length; j++) {
    		        		var level3 = level3List[j];
    		        		if(level3.parentId==level2MenuId){
    		        			vHtml+="<li><a onClick='loadInit(\""+data.base+"/"+level3.url+"?menuId="+level3.functionId+"\",\""+level3.displayName+"\")'><span>"+level3.displayName+"</span></a></li>";
    		        		}
    		        	}
    		        	vHtml+="</ul>";
    		        	vHtml+="</li>";	
    		        }     
					
    		        		
    		    }
    		    
            }
            vHtml+="</ul>";
			$(".easymis-left-nav").html(vHtml);
		    $('.easymis-left-nav-item>a').on('click',function(){
	        if (!$('.easymis-left-nav').hasClass('easymis-left-nav-mini')) {
	            if ($(this).next().css('display') == "none") {
	                //展开未展开
	                $('.easymis-left-nav-item').children('ul').slideUp(300);
	                $(this).next('ul').slideDown(300);
	                $(this).parent('li').addClass('easymis-left-nav-show').siblings('li').removeClass('easymis-left-nav-show');
	            }else{
	                //收缩已展开
	                $(this).next('ul').slideUp(300);
	                $('.easymis-left-nav-item.easymis-left-nav-show').removeClass('easymis-left-nav-show');
	            }
	        }
	    });
		},
		error : function() {

		}
	});	
};
</script>
<style>

.fontawesome-icon {
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.easymis-left-nav-item>a {
	text-decoration: none;
}

.container-fluid-ful {
	width:100%;
	min-width:1550px;
	display:flex;
	min-height:100%;
	padding-top:62px;
	background:white;
	align-items: stretch;
	position:relative;
}

.easymis-left-nav {
	margin-left: 0px !important;
	float:left;
	height:auto;
	min-height:100%;
}

.easymis-left-nav::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
}
.easymis-left-nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
}
.easymis-left-nav::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
}
        
/* 添加页面标签 */
.page {
	margin: 0px 0px;
	height:100%;
	flex:1;
	width:500px;
}
.page-tag {
	position:relative;
	background:#f1f4f5;
	width:100%;
}
.page-tags {
	width:100%;
	height:40px;
	background:#f1f4f5;
	border-bottom:1px solid #e4eaec;
	overflow:hidden;
	display:block;
}
.page-tag .pre,.page-tag .next {
	position:absolute;
	top:0;
	line-height:40px;
	cursor:pointer;
}
.page-tag .pre {
	left:10px;
}
.page-tag .next {
	right:10px;
}
.page-tags ul {
	margin:0;
	padding:0;
	-webkit-transition:all .15s linear;
	-moz-transition:all .15s linear;
	transition:all .15s linear;
}
.page-tags ul li {
	float:left;
	width:130px;
	height:40px;
	line-height:40px;
	text-align:center;
	cursor:pointer;
}
.page-tags ul li>span {
	display:inline-block;
	width:115px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	padding:0 10px 0 10px;
	float:left;
}
.page-tags ul li>i {
	display:inline-block;
	width:10px;
	height:40px;
	line-height:40px;
	floar:right;
	right:5px;
}
.page-tags ul li:hover {
	background:#f3f7f9;
}
.page-tags ul li>i:hover {
	color:red;	
}
.page-tags ul li.tagsActive {
	background:white;
}
.page-content {
	/* width: 85.578%; */
	padding: 28px;
	
}
/*列表查询页*/
.toolbar {
	margin-bottom: 10px;
}

.query-filter {
	margin-top: 10px;
	padding-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #D3DCE6;
}

.main_grid_top {
	position: relative;
	border-top: none;
	box-shadow: 0 2px 0 0 #00aaef inset
}

.easymis-table {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
	width: 100% !important;
}

.easymis-table thead th {
	cursor: pointer;
}

.easymis-table tbody td {
	padding: 5px 12px;
	font-size: 14px;
}

.easymis-table tbody td i {
	padding: 2px 3px 1px 3px;
	border-radius: 2px;
	border: 1px solid #DADEE4;
}

.easymis-table tbody td i:hover {
	background: #0471c3;
	color: #ffffff;
	padding: 2px 3px 1px 3px;
	border-radius: 2px;
}

.t-mo1 {
	background: #006fc2;
	height: 50px;
	color: #ffffff;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	padding-top: 10px;
	font-family: Arial, "Hiragino Sans GB", "微软雅黑", "黑体-简", Helvetica,
		sans-serif;
}

<!--
表单验证-->.has-error .help-block, .has-error .control-label, .has-error .radio,
	.has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline
	{
	color: #a94442;
}

.has-error .form-control {
	border-color: #a94442;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.has-error .form-control:focus {
	border-color: #843534;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

.has-error .input-group-addon {
	color: #a94442;
	background-color: #f2dede;
	border-color: #a94442;
}

.has-error .form-control-feedback {
	color: #a94442;
}

.help-block {
	display: block;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #a94442;
}

.form-control-feedback {
	position: absolute;
	top: 2px;
	right: 10px;
	z-index: 2;
	display: block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	color: #28a745;
}

.input-lg+.form-control-feedback {
	width: 46px;
	height: 46px;
	line-height: 46px;
}

.input-sm+.form-control-feedback {
	width: 30px;
	height: 30px;
	line-height: 30px;
}

@media ( min-width : 992px) {
	.modal-mlg {
		max-width: 900px;
	}
}

.navbar-right {
	float: right !important;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	color: #fff;
}

.navbar-right ul {
	width: 330px;
	font-size: 16px;
	line-height: 62px;
	margin: 0;
}

.navbar-right ul li {
	float: left !important;
	width: 60px;
	font-size: 16px;
}

.navbar-right ul li a {
	color: #fff;
}
</style>
<!-- Bootstrap -->
<script src="${base}/public/js/jquery.min.js"></script>
<link href="${base}/public/plug/bootstrap/css/bootstrap.css"
	rel="stylesheet">
<script src="${base}/public/plug/bootstrap/js/bootstrap.bundle.js"></script>
<link
	href="${base}/public/plug/bootstrapvalidator/css/bootstrapValidator.css"
	rel="stylesheet">
<script
	src="${base}/public/plug/bootstrapvalidator/js/bootstrapValidator.js"
	data-name="formValidation"></script>
<script type="text/javascript"
	src="${base}/public/plug/bootstrapvalidator/js/language/zh_CN.js"></script>


<link rel="stylesheet" type="text/css"
	href="${base}/public/plug/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<script type="text/javascript"
	src="${base}/public/plug/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript"
	src="${base}/public/plug/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!--日期控件-->
<!-- <script type="text/javascript" src="${base}/public/plug/My97DatePicker/WdatePicker.js"></script> -->
<!--自动完成-->
<link href="${base}/public/plug/autocomplete/jquery.autocomplete.css"
	rel="stylesheet" type="text/css" />
<script type="text/javascript"
	src="${base}/public/plug/autocomplete/bootstrap-suggest.min.js">
		</script>
<script src="//cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>

<link rel="stylesheet" type="text/css"
	href="${base}/public/plug/bootstrap-fileinput/fileinput.css">
<script type="text/javascript"
	src="${base}/public/plug/bootstrap-fileinput/fileinput.js"></script>

<link rel="stylesheet" type="text/css"
	href="${base}/public/plug/bootstrap-tokenfield/css/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css"
	href="${base}/public/plug/bootstrap-tokenfield/css/tokenfield-typeahead.css">
<script type="text/javascript"
	src="${base}/public/plug/bootstrap-tokenfield/bootstrap-tokenfield.js"></script>

<link rel="stylesheet"
	href="${base}/public/plug/zTree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${base}/public/plug/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript"
	src="${base}/public/plug/zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript"
	src="${base}/public/plug/zTree/js/jquery.ztree.exedit.js"></script>

<link rel="stylesheet" type="text/css"
	href="${base}/public/plug/multi-select/css/multi-select.css">
<script src="${base}/public/plug/multi-select/js/jquery.multi-select.js"></script>
